/// 类组件/函数组件
import React, {useState, FC} from 'react';
import { Table, Tag, Space, Button, Popconfirm } from 'antd';
import { connect, Dispatch, Loading, UserState } from 'umi';
import UserModal from './components/UserModal'
import {SingleUserType, FormValues} from './data.d'

interface UserPageProps {
  users: UserState;
  dispatch: Dispatch;
  userListLoading: boolean;
}

// FC => Function Component
const UserListPage: FC<UserPageProps> = ({ users, dispatch, userListLoading }) => {
  // 返回的是数组，第一个是modalVisible，第二个是改变这个参数的值
  // useState(false) 表示默认值是false
  const [modalVisible, setModalVisible] = useState(false);
  const [record, setRecord] = useState<SingleUserType | undefined>(undefined);

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: 'Create Time',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: 'Action',
      key: 'action',
      render: (text: string, record: SingleUserType) => (
        <span>
          {/*<a onClick={() => {*/}
          {/*  setModalVisible(true);*/}
          {/*}}>Edit</a>&nbsp;&nbsp;*/}
          {/*可以直接写函数名，但是不能写函数名带参数*/}
          {/*如果不是函数名的话，必须得写函数*/}

          <a onClick={() => {
            editHandler(record);
          }}>Edit</a>&nbsp;&nbsp;

          {/*<a onClick={editHandler}>Edit</a>&nbsp;&nbsp;*/}

          <Popconfirm
            title="Are you sure delete this task?"
            onConfirm={() => {
              confirm(record);
            }}
            okText="Yes"
            cancelText="No"
          >
            <a>Delete</a>
          </Popconfirm>
        </span>
      ),
    },
  ];

  const confirm = (record: SingleUserType) => {
    const id = record.id;
    dispatch({
      type: 'users/delete',
      payload: id
    });
  }

  const editHandler = (record: SingleUserType) => {
    setModalVisible(true);
    console.log(record);
    setRecord(record);
  }

  const closeHandler = () => {
    setModalVisible(false);
  }

  const addHandler = () => {
    setRecord(undefined);
    setModalVisible(true);
  }

  const onFinish = (values: FormValues) => {
    const id = record && record.id;
    if (id) {
      // 如果是在model里，同一个文件里的话，不需要写namespace
      // 不同文件需要写namespace
      dispatch({
        type: 'users/edit',
        payload: {
          id, values
        }
      });
    } else {
      dispatch({
        type: 'users/add',
        payload: values
      });
    }

    setModalVisible(false);
  }

  return (
    <div className="list-table">
      <Button type={'primary'} onClick={addHandler}>Add</Button>
      <Table columns={columns} dataSource={users.data} rowKey={'id'} loading={userListLoading} />
      <UserModal
        visible={modalVisible}
        closeHandler={closeHandler}
        record={record}
        onFinish={onFinish}>
      </UserModal>
      {/*<Button type={'primary'} onClick={() => {*/}
      {/*  setModalVisible(true);*/}
      {/*  const record = {name: 'Banpresto', email: 'ban@ban.com'};*/}
      {/*  setRecord(record);*/}
      {/*}}>Primary Button</Button>*/}
    </div>
  );
};

// state里面有users，对应的是model里面的namespace
const mapStateToProps = ({ users, loading }: { users: UserState, loading: Loading }) => {
  console.log(loading)
  return {
    users,
    userListLoading: loading.models.users
  };
}

// 连接model
export default connect(mapStateToProps)(UserListPage);
